<template>
  <div class="role_details">
    <el-container class="base_details_container">
      <BackTitleView :title="title" />
      <el-main>
        <div class="base_details_content">
          <div class="content">
            <div class="base_details_title">基本信息</div>
            <div class="base_details_content_second">
              <el-form ref="formRef" :model="form" :rules="rules" :disabled="readOnly" label-width="100px" class="base_details_form">
                <el-form-item label="角色名称" prop="roleName">
                  <el-input v-model="form.roleName" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="基地级别" prop="shopLevel">
                  <el-radio-group v-model="form.shopLevel">
                    <el-radio
                      v-for="item in shopLevelOptions"
                      :key="item.value"
                      :label="item.value"
                    >
                      {{ item.label }}</el-radio
                    >
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="功能权限" prop="permissionList">
                  <el-tree
                  ref="treeRef"
                  :data="menuData"
                  show-checkbox
                  default-expand-all
                  node-key="key"
                  highlight-current
                  :props="defaultProps"
                />
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </el-main>
      <el-footer>
        <el-button @click="back">取消</el-button>
        <el-button @click="checkForm" type="primary">保存</el-button>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup>
import BackTitleView from "@com/BackTitleView.vue";
import { ref, reactive } from "vue";
import useRoute from "@util/router";
import $ from "@util/base"
import { $msg } from "@ui/msg"
import api from "@api/role"

const route = useRoute()

const urlQuery = route.query()
const readOnly = ref(false)
var title = "角色详情"

const menuData = ref([])

getPermission()
function getPermission() {
  api.permission(val => {
    menuData.value = val
    $.handleCRU(urlQuery.type, {
      show: () => {
        readOnly.value = true
        title = "角色详情"
        getData()
      },
      add: () => {
        title = "新增角色"
      },
      modify: () => {
        title = "修改角色"
        getData()
      }
    })
  })
}

const shopLevelOptions = [{
  label: '总店',
  value: '1040001'
}, {
  label: '分店',
  value: '1040002'
}]


const treeRef = ref('')
const defaultProps = {
  children: 'children',
  label: 'title',
}


function getData() {
  api.details(route.query().code, val => {
    form.value.roleName = val.resultRole.name
    form.value.shopLevel = val.resultRole.shopLevel
    if (val.resultRole.modifyFlag != 1) {
      readOnly.value = true
    }
    // setCheckedKeys(val.resultRole.treeList.split(','))
    setCheckedKeys(val.permIds.split(','))
  })
}

const formRef = ref('')

const form = ref({
  roleName: '',
  shopLevel: '',
  treeList: '',
  permissionList: []
})

const rules = {
  roleName: [{
    required: true,
    message: '请输入角色名称',
    trigger: 'blur',
  }],
  shopLevel: [{
    required: true,
    message: '请选择基地级别',
    trigger: 'blur',
  }],
  permissionList: [{
    required: true,
    type: 'array',
    message: '请勾选功能权限',
    trigger: 'blur',
  }],
}

function getAllTreeKeys() {
  let f = treeRef.value.getHalfCheckedKeys()
  let c = treeRef.value.getCheckedKeys(false)
  return f.concat(c)
}

function getCheckedKeys() {
  return treeRef.value.getCheckedKeys(false).join(',')
}

function setCheckedKeys(arr) {
  treeRef.value.setCheckedKeys(arr, false)
}

const checkForm = () => {
  form.value.permissionList =  treeRef.value.getCheckedNodes().filter(val=>{
    return val.children.length <= 0
  })
  .map(val=>{
    return val.key
  })


  // form.value.treeList = getCheckedKeys()
  // form.value.permissionList = getAllTreeKeys()
  // treeRef.value.getCheckedKeys(false)
  // console.log(treeRef.value.getCheckedKeys())
  // console.log(treeRef.value.getCheckedNodes())
  
  // console.log(a)
  // console.log(form.value.treeList)
  // console.log(form.value.permissionList)
  formRef.value.validate((valid) => {
    if (valid) {
      $.handleCRU(route.query().type, {
        add: () => { addData() },
        modify: () => { modifyData() }
      })
    } else {
      return false
    }
  })
}

function addData() {
  api.add(form.value, () => {
    $msg.succ("添加成功")
    back()
  })
}
function modifyData() {
  api.update(route.query().code, form.value, () => {
    $msg.succ("修改成功")
    back()
  })
}

function back() {
  route.go(-1)
}
</script>

<style lang="scss">
.role_details {
  height: 100%;
  .table_tag_box {
    text-align: left;
    .el-tag {
      margin-right: 10px;
    }
  }
}
</style>